// components/test3/test3.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    rgb:{ //rgb的颜色值对象
      r:0,
      g:0,
      b:0
    },
    fullColor:"0,0,0" //根据rgb的三个属性 动态计算fullColor的值
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changer(){
      //改变数字值 最大是255
      this.setData({
        'rgb.r':this.data.rgb.r+5 > 255 ? 255 : this.data.rgb.r+5
      })
    },
    changeg(){
      this.setData({
        'rgb.g':this.data.rgb.g+5 > 255 ? 255 : this.data.rgb.g+5
      })
    },
    changeb(){
      this.setData({
        'rgb.b':this.data.rgb.b+5 > 255 ? 255 : this.data.rgb.b+5
      })
    }, 
    //随机生成颜色的方法
  _randomColor(){
    this.setData({
      "rgb":{
        r:Math.floor(Math.random()*256),
        g:Math.floor(Math.random()*256),
        b:Math.floor(Math.random()*256),
      }
    })
  },
  },
  
  observers:{
    //监听rgb对象上 r,g,b三个属性反生变化 
    // "rgb.r,rgb.g,rgb.b":function(r,g,b){
    //   this.setData({
    //     //为data中的fullColor 重新赋值
    //     fullColor:`${r},${g},${b}`
    //   })
    // },
    //通配符 ** 来监听对象中所有属性的变化
    "rgb.**":function(obj){
      this.setData({
        //为data中的fullColor 重新赋值
        fullColor:`${obj.r},${obj.g},${obj.b}`
      })
    }
  },
  //组件所在页面的声明周期函数 需要定义在 pageLifetimes节点中
  pageLifetimes:{
    //页面被展示
    show(){
      this._randomColor()
    },
    //页面被隐藏
    hide(){

    },
    //页面尺寸发生变化
    resize(){

    },
  }
})
